<!doctype html>
<html lang="en" dir="ltr">
  <head>
    <script type="module" crossorigin src="/frontend-mini-challenges/javascript/assets/index-aV8LV_NI.js"></script>
    <link rel="modulepreload" crossorigin href="/frontend-mini-challenges/javascript/assets/navbar-PAFhV-cJ.js">
    <link rel="modulepreload" crossorigin href="/frontend-mini-challenges/javascript/assets/header-DIqzw3PH.js">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/javascript/assets/navbar-Dkne97UN.css">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/javascript/assets/header-DAZPOirm.css">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/javascript/assets/index-CPPiAUqk.css">
  </head>
  <body>
    <div class="container">
      <h1 id="result">Refresh Me</h1>

      <div class="player-name">
        <p>Player 1</p>
        <p>Player 2</p>
      </div>

      <div class="dice-container">
        <!-- For 1 dot -->
        <div id="dice1" style="display: none">
          <div class="dice">
            <div class="col-1"></div>
            <div class="col-2">
              <span></span>
            </div>
            <div class="col-3"></div>
          </div>
        </div>

        <!-- For 2 dots -->
        <div id="dice2" style="display: none">
          <div class="dice">
            <div class="col-1">
              <span></span>
            </div>
            <div class="col-2"></div>
            <div class="col-3">
              <span></span>
            </div>
          </div>
        </div>

        <!-- For 3 dots -->
        <div id="dice3" style="display: none">
          <div class="dice">
            <div class="col-1">
              <span></span>
            </div>
            <div class="col-2">
              <span></span>
            </div>
            <div class="col-3">
              <span></span>
            </div>
          </div>
        </div>

        <!-- For 4 dots -->
        <div id="dice4" style="display: none">
          <div class="dice">
            <div class="col-1">
              <span></span>
              <span></span>
            </div>
            <div class="col-2"></div>
            <div class="col-3">
              <span></span>
              <span></span>
            </div>
          </div>
        </div>

        <!-- For 5 dots -->
        <div id="dice5" style="display: none">
          <div class="dice">
            <div class="col-1">
              <span></span>
              <span></span>
            </div>
            <div class="col-2">
              <span></span>
            </div>
            <div class="col-3">
              <span></span>
              <span></span>
            </div>
          </div>
        </div>

        <!-- For 6 dots -->
        <div id="dice6" style="display: none">
          <div class="dice">
            <div class="col-1">
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div class="col-2"></div>
            <div class="col-3">
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        </div>
      </div>

      <button class="play">Play</button>
    </div>
  </body>
</html>
